<template>
  <view>
    <u-search placeholder="搜索你喜欢的主角名" v-model="searchKeyword" @search="search"></u-search>
    <u-swiper
        :list="list1"
    >
    </u-swiper>
    <view>
      <view>{{birthdayString}}生日快乐</view>
      <view v-for="role in roles" index="role.id">
        <!--左，头像-->
        <view>
          <u-avatar :src="role.avatar"></u-avatar>
        </view>
        <!--中，介绍-->
        <view>
          <view>
            <!--角色名-->
            <view>
              {{role.name}}
            </view>
            <!--角色性别-->
            <view>
              <u-icon name="man" size="20" color="red"></u-icon>
            </view>
          </view>
          <!--生日-->
          <view>
            生日：{{role.birthday}}
          </view>
          <!--角色状态-->
          <view>
            {{role.statusString}}
          </view>
        </view>
        <!--右，按钮-->
        <view>
          <u-button type="primary" size="large" @click="show = true">
            去表白
          </u-button>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data(){
	  return{
		  searchKeyword:"",
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
      birthdayString: '2024.5.6',
      roles:[{
		    avatar:'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        name: '演示',
        birthday: '生日11',
        statusString: '小江爷生日快乐，和孟听要幸福'
      }],
	  }

  },
  methods:{
    //搜索功能
    search(){
      // search(searchKeyword);


    },
  }
}
</script>

<style scoped>

</style>
